<template>
    <div class="task-tables">
      <div class="task-tables-title DangerColor">
				<div v-if="this.$route.path == '/taskModule'||this.$route.path == '/TaskReject'">
					<div class="taskbtn">
						<el-button size="small" @click="allTaskData()">所有数据</el-button>
						<el-button size="small" @click="checkTaskData()">选中数据</el-button>
						<el-button size="small" @click="addTaskData()" :disabled='TaskId!=""?false:true'>加入到任务</el-button>
            <el-button size="small" @click="addAllBatch()" :disabled='TaskId!=""?false:true'>加入整个批次</el-button>
					</div>
					<el-select class='selectCk' v-model="checkedValue" placeholder="数据是否被修改" @change='handSelectOptions'>
						<el-option
							v-for="item in checkedOptions"
							:key="item.item_id"
							:label="item.item_name"
							:value="item.item_id">
						</el-option>
					</el-select>
				</div>
				<div class="detailedData">
						<slot name="cont"></slot>
				</div>
      </div>
      <div class="tableList" id="tableList">
        <el-table  ref="multipleTable" :data="tableData"   :row-class-name="tableRowClassName" style="width: 100%" id="taskTableList" row-key="data_id" 
            @selection-change="handleSelectionChange" 
            @row-click='handRow'>
            <el-table-column type="selection"  width="55" v-if="this.$route.path != '/TaskReject'"></el-table-column>
            <el-table-column prop="index" label="序号"  width="55" ></el-table-column>
            <el-table-column prop="gis_id" label="GISID"  align="center" v-if="this.$route.path == '/taskModule'"></el-table-column>
            <el-table-column prop="geo_layer_name" label="层" align="center" v-if="this.$route.path == '/taskModule'"></el-table-column>
            <el-table-column prop="geo_type" label="GIS类型" width="100" align="center" v-if="this.$route.path == '/taskModule'">
            </el-table-column>
						<el-table-column  v-if="this.$route.path == '/taskModule'"  label="所属任务"  align="center">
								<template slot-scope="scope">
									<el-tag class='tags' v-for="(item,index) in scope.row.tasks" :key="index" closable  @close="handleClose(item)">{{item.task_name}}</el-tag>
								</template>
						</el-table-column>
						<el-table-column  v-if="this.$route.path == '/taskModule'"  label="数据是否被修改" width="150" align="center">
								<template slot-scope="scope">
									<span v-if="scope.row.is_modified" style="color: red;">是</span>
									<span v-else>否</span>
								</template>
						</el-table-column>
						<el-table-column prop="gis_id" label="GISID"  align="center" v-if="this.$route.path == '/TaskReject'"></el-table-column>
						<el-table-column prop="geo_layer_str" label="层" align="center" v-if="this.$route.path == '/TaskReject'"></el-table-column>
						<el-table-column prop="geo_type" label="GIS类型" width="100" align="center" v-if="this.$route.path == '/TaskReject'"></el-table-column>
						<el-table-column prop="audit_remark" label="驳回原因"  align="center" v-if="this.$route.path == '/TaskReject'"></el-table-column>
						<el-table-column  v-if="this.$route.path == '/TaskReject'"  label="数据是否被修改" width="150" align="center">
								<template slot-scope="scope">
									<span v-if="scope.row.is_modify" style="color: red;">是</span>
									<span v-else>否</span>
								</template>
						</el-table-column>
						
						<el-table-column prop="gis_id" label="GISID"  align="center" v-if="this.$route.path == '/AuditModule'"></el-table-column>
						<el-table-column prop="geo_layer_str" label="层" align="center" v-if="this.$route.path == '/AuditModule'"></el-table-column>
						<el-table-column prop="operate_type_str" label="操作类型"  align="center" v-if="this.$route.path == '/AuditModule'"></el-table-column>
						<el-table-column prop="geo_type" label="GIS类型" width="100" align="center" v-if="this.$route.path == '/AuditModule'"></el-table-column>
						<el-table-column prop="audit_remark" label="所属任务"  align="center" v-if="this.$route.path == '/AuditModule'"></el-table-column>
						<el-table-column  v-if="this.$route.path == '/AuditModule'"  label="数据是否被修改" width="150" align="center">
								<template slot-scope="scope">
									<span v-if="scope.row.is_modify" style="color: red;">是</span>
									<span v-else>否</span>
								</template>
						</el-table-column>
        </el-table>
				<div class="detailedData detailedDataInfo">
					<slot name="title"></slot><span>共计：{{tableData.length}}条</span><slot name="list"></slot>
				</div>
      </div>
    </div>
</template>
<script>
import TaskMangeService from "../../../services/TaskMangeService.js";
import gcoord from 'gcoord';
import bus from '../bus';
export default {
  data() {
    return {
      //addAllBatchLoading: false,
      TaskMangeService: new TaskMangeService(),
      tableData: [],
      queryData:this.$route.query,
      selectData_id:null,
      pagination:null,
      dataIdArray: [],
      checkedOptions: [{
        item_id: 103010,
        item_name: "是"
      },{
        item_id: 103020,
        item_name: "否"
      }],
      checkedValue: '',
      auditStatusOptions: [{
        "item_id": null,
        "item_name": "全部"
        },{
        "item_id": 106010,
        "item_name": "待审核"
        },{
        "item_id": 106020,
        "item_name": "审核通过"
        },{
        "item_id": 106030,
        "item_name": "审核驳回"
        }],
       auditStatusValue: '',
			 allData:[],
			 TaskId:'',
    };
  },
  created() {
    let checkedOptions = JSON.parse(localStorage.getItem('zhdq_words')).words[103].items;
  },
  mounted() {
    bus.$on('pagination',(res)=>{
      this.pagination = res;
    })
    bus.$on('TableInfo',(res) =>{
      this.tableData = [];
      var index =(this.pagination.page_index - 1) * this.pagination.page_size;
      res.forEach((ele,i) => {
        if(ele.rest){
          this.$set(ele.rest, "index", index + i + 1);   
          this.tableData.push(ele.rest)
        }
      });
    }),
    bus.$on('HeightInfo', function (content) {
        let tableList = document.getElementById('tableList');
        tableList.style.height = content;
        // Vue.set(this.minHeight,content,this.minHeight)
    })
		
		bus.$on('TaskId',(res)=>{
			this.TaskId = res;
		})
		this.Reject();
  },
  methods: {
    //选择相应的数据；；
    handleSelectionChange(val) {
      this.dataIdArray = [];
      val.forEach(ele =>{
        this.dataIdArray.push(ele.data_id);
      })
			this.$emit('task-table','x6', this.dataIdArray);
    },
    //加入任务列表
    handTaskList(flag){
      if (this.dataIdArray.length == 0) {
        this.$message.warning('请选择数据')
        return false;
      }
      let propsData ={};
      propsData.data_ids = this.dataIdArray;
      propsData.submitted = flag;
      bus.$emit('selectTaskData',propsData);
    },

    //标记审核列表
    markTaskList(){
      if (this.dataIdArray.length == 0) {
        this.$message.warning('请选择数据')
        return false;
      }
      let data_s = [];
      this.dataIdArray.forEach(ele=>{
        let obj = {};
        obj.id = ele;
        obj.remark = null;
        data_s.push(obj)
      })
      let paramData = {
        'data_s':data_s,
        'adopt':106020
      }
      bus.$emit('markTaskData',paramData);
    },

    handRow(row, event, column){
      this.selectData_id = row.data_id;  
    },
    tableRowClassName({row, rowIndex}){
      if(this.selectData_id == row.data_id){
         return 'success-row';
      }
      return ''
    },
    handSelectOptions(val){
//       let obj = {
//           audit_status:this.auditStatusValue,
//           check_status:this.checkedValue,
//       }
//       bus.$emit('SelectOptions',obj)

			this.$emit('task-table','x4',val==103010?true:false);
    },
		
		//重构
		//所有数据
		allTaskData(){
			this.$emit('task-table','x1');
		},
		//选中数据
		checkTaskData(){
			this.$emit('task-table','x5');
		},
		//加入任务
		addTaskData(){
			this.$emit('task-table','x3');
				this.addTaskList();
		},
    //加入整个批次
    async addAllBatch(){
      this.$emit('task-table','x6');
    //  this.addAllBatchLoading = true;
      bus.$emit('loading',true);
      let res = await this.TaskMangeService.addAllDataToTask(this.TaskId,this.$route.query.batch_id);
      if(res.code==200){
        this.$message({
          message: res.msg,
          type: 'success',
          duration:1000
        });
      }
    //  this.addAllBatchLoading = false;
      bus.$emit('loading',false);
    },
		async addTaskList(){
			let parmes 
			if(this.$route.path == '/taskModule'){
				parmes ={
					'task_id':this.TaskId,
					'data_ids':this.dataIdArray
				}
			}
			if(this.$route.path == '/TaskReject'){
				parmes ={
					'task_id':Number(this.$route.query.task_id),
					'data_ids':[]
				}
			}
			let res = await this.TaskMangeService.joinTask(parmes);
			if(res.code==200){
				this.$message({
					message: res.msg,
					type: 'success',
					duration:1000
				});
			}
		},
		//移除任务
		handleClose(obj){
			this.$emit('task-table','x2',obj);
		},
		
		//任务驳回
		Reject(){
			if(this.$route.path == '/TaskReject'){
				this.TaskId = this.$route.query.task_id;
			}
		},
		addReject(){
			
		}
		
  }
};
</script>
<style lang="scss" scoped>
  .task-tables{
    margin-top: 5px;
    border: 1px solid #f3f3f3;
    padding: 5px 10px;
    .tableList{
      height: 150px;
      overflow-y: scroll;
      
    }
    .tableList .el-table thead {
      color: rgba(0, 0, 0, 0.85);
    }
		.selectCk,.detailedData{float: left;}
		.detailedData{
				line-height: 30px;
				padding-left: 30px;
				color: #000;
		}
  }
	.task-tables-title{overflow: hidden;}
	.taskbtn{float: left;margin-right: 10px;}
	.detailedDataInfo{
		text-align: right;
    float: inherit;
    padding-right: 30px;
    padding-top: 5px;
	}
	.tags{
		margin: 0 5px;
	}
</style>

<style>
 .el-table .success-row {
    background: #f5f7fa;
  }
</style>
